<template>
    <div class="imgs-lists">
        <van-list v-model="loading" :finished="finished" finished-text="- End -" @load="onLoad" :error.sync="error"
            error-text="请求失败，点击重新加载">
            <ul>
                <template v-for="item in imgs">
                    <li class="travel" v-for="ele in item" :key="ele.postid" @click="toSpecial(ele.postid)">
                        <div class="img-box"><img v-lazy="ele.image" alt=""></div>
                        <div class="explain">
                            <h4>{{ele.title}}</h4>
                            <div>
                                <span class="icon-daochu iconfont">{{ele.share_num}}</span>
                                <span class="icon-aixin iconfont">{{ele.like_num}}</span></div>
                        </div>
                    </li>
                </template>
            </ul>
        </van-list>
    </div>
</template>

<script>
    import {
        getBehindTheScenes
    } from "../../api/behindTheScenes"
    export default {
        name: 'lists',
        props: {
            cateid: {
                default: 2
            }
        },
        data() {
            return {
                imgs: [],
                loading: false,
                finished: false,
                error: false,
                off: 1, //页码,
            }
        },
        methods: {
            onLoad() {
                // 异步更新数据
                if (this.cateid) {
                    getBehindTheScenes({
                        p: this.off,
                        size: 9,
                        cateid: this.cateid
                    }).then(data => {
                        this.imgs.push(data.data);
                        console.log(this.imgs);
                        // 加载状态结束
                        this.loading = false;
                        // 数据全部加载完成
                        this.off++;
                        if (data.data.length < 10) {
                            this.finished = true;
                        }
                    }).catch(() => {
                        this.error = true;
                        this.loading = false;
                    });
                }
            },
            toSpecial(id) {
                console.log("幕后文章",id);
                this.$router.push({
                    name: 'Special',
                    params: {
                       id: id
                    }
                })
            }
        },
    }
</script>

<style lang="less" scoped>
    .imgs-lists {
        ul {
            background-color: #fff;
        }

        .travel {
            display: flex;
            padding: 10px 12px 10px 10px;
            height: 78px;

            .img-box {
                width: 126px;
                height: 78px;
                margin-right: 14px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .explain {
                flex: 1;
                line-height: 16px;
                padding-top: 10px;

                h4 {
                    font-size: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

                div {

                    margin-top: 12px;

                    span {
                        margin-right: 24px;
                        font-size: 12px;
                        color: #ccc;
                    }
                }
            }
        }
    }
</style>